<template>
  <div class="aaa">
    <div class="left" :style="{ backgroundColor: props.color }"></div>
    <div class="right">
      <div class="card">
        <div class="part">
          <span class="part-title">欢迎登录</span>
          <span class="part-content"
            >欢迎登录{{ props.name }},您可以在这里管理你的团队</span
          >
        </div>
        <div class="in">
            <el-form style="width: 100%;">
                <el-form-item :model="formLabelAlign">
                    <el-input v-model="formLabelAlign.username"/>
                </el-form-item>
                <el-form-item :model="formLabelAlign">
                    <el-input v-model="formLabelAlign.password"/>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn">
          <el-button style="width: 100%" :color="props.btn">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const formLabelAlign = reactive({
    username: '',
    password: ''
})
const props = defineProps({
  name: String,
  color: String,
  img: String,
  btn: String,
});

import axios from 'axios'
axios.get('/api/get/user').then(res => {
  console.log(res);
})
</script>

<style scoped>
.aaa {
  width: 100%;
  height: 50vh;
  background-color: whitesmoke;
  border-radius: 10px;
  display: flex;
  .left {
    flex: 2;
    border-radius: 10px 0 0 10px;
  }
  .right {
    flex: 6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.card {
  width: 310px;
  height: 230px;
  margin: 15px;
  .part {
    display: flex;
    flex-flow: column;
    margin-bottom: 15px;
    .part-title {
      font-size: larger;
      font-weight: bolder;
    }
    .part-content {
      margin-top: 5px;
      font-size: x-small;
      font-weight: 100;
    }
  }
  .in{
    display: flex;
    align-self: center;
    justify-content: center;
    width: 310px;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
